<template>
  <div class="main main-content">
    <el-button
      v-if="isEdit"
      type="primary"
      @click="saveRightTree"
      style="float: right"
      >保存</el-button
    >
    <el-button v-else type="primary" @click="isEdit = true" style="float: right"
      >编辑</el-button
    >
    <div
      class="float-right w-[100%]"
      style="display: flex; justify-content: center; align-items: center"
    >
      <div>
        <el-card class="box-card" style="width: 400px; height: 760px">
          <template #header>
            <div class="card-header">
              <el-tabs
                v-model="activeTabName"
                class="demo-tabs"
                @tab-click="handleTabClick"
              >
                <el-tab-pane
                  v-for="(item, index) in tabsList"
                  :key="'tab_' + index"
                  :label="item.label"
                  :name="item.name"
                />
              </el-tabs>
              <el-input
                v-model="allSearchValue"
                placeholder="请输入表单名称"
                style="width: 70%; margin-right: 8px"
              />
              <el-button type="primary" @click="searchUser('left')"
                ><el-icon><Search /></el-icon>搜索</el-button
              >
            </div>
          </template>
          <div style="overflow-y: auto; display: flex">
            <!-- 左侧 -->
            <div style="width: 100%">
              <el-tree
                :data="treeData"
                :show-checkbox="false"
                :props="treeProps"
                node-key="id"
                ref="treeRef"
                :filter-node-method="filterNode"
                :default-expand-all="true"
                @node-click="node => handleNodeClick(node, 'highlightMap')"
              >
                <template #default="{ node, data }">
                  <div
                    :class="[
                      'pl-1',
                      'pr-1',
                      'rounded',
                      'flex',
                      'items-center',
                      'select-none',
                      'w-[100%]',
                      allSearchValue.trim().length > 0 &&
                        node.label.includes(allSearchValue) &&
                        'text-red-500',
                      highlightMap[node.id]?.highlight
                        ? 'dark:text-primary'
                        : ''
                    ]"
                    :style="{
                      background: highlightMap[node.id]?.highlight
                        ? 'var(--el-color-primary-light-7)'
                        : 'transparent'
                    }"
                    style="height: 36px"
                  >
                    <div class="tree-item_icon">
                      <img
                        v-if="data.groupType == 'folder'"
                        src="../../assets/folder_icon.png"
                      />
                      <img
                        v-if="data.groupType == '2'"
                        src="../../assets/fold_icon.png"
                        style="width: 14px; height: 14px"
                      />
                      <img
                        v-if="data.groupType == '1'"
                        src="../../assets/process_icon.png"
                        style="width: 14px; height: 14px"
                      />
                    </div>
                    <div>{{ data.label }}</div>
                  </div>
                </template>
              </el-tree>
            </div>
          </div>
        </el-card>
      </div>
      <div class="middle-btn-list">
        <el-button type="primary" circle @click="handleLeftArrow">
          <template #icon>
            <ArrowLeftBold style="width: 10em" />
          </template>
        </el-button>
        <el-button type="primary" circle @click="handleRightArrow">
          <template #icon>
            <ArrowRightBold style="width: 10em" />
          </template>
        </el-button>
      </div>
      <el-card class="box-card" style="width: 400px; height: 760px">
        <template #header>
          <div class="card-header">
            <div class="header-title">已选项</div>
          </div>
        </template>
        <div class="tag-list">
          <div>
            <el-tree
              :data="treeDataRight"
              :show-checkbox="false"
              :props="treeProps"
              node-key="id"
              ref="treeRef"
              :filter-node-method="filterNode"
              :default-expand-all="true"
              :expand-on-click-node="false"
            >
              <template #default="{ node, data }">
                <div
                  :class="[
                    'pl-1',
                    'pr-1',
                    'rounded',
                    'flex',
                    'items-center',
                    'select-none',
                    'w-[100%]',
                    allSearchValue.trim().length > 0 &&
                      node.label.includes(allSearchValue) &&
                      'text-red-500',
                    highlightRightMap[node.id]?.highlight
                      ? 'dark:text-primary'
                      : ''
                  ]"
                  :style="{
                    background: highlightRightMap[node.id]?.highlight
                      ? 'var(--el-color-primary-light-7)'
                      : 'transparent'
                  }"
                  style="height: 40px"
                >
                  <div class="tree-item_icon">
                    <img
                      v-if="data.groupType == 'folder'"
                      src="../../assets/folder_icon.png"
                    />
                    <img
                      v-if="data.groupType == '2'"
                      src="../../assets/fold_icon.png"
                      style="width: 14px; height: 14px"
                    />
                    <img
                      v-if="data.groupType == '1'"
                      src="../../assets/process_icon.png"
                      style="width: 14px; height: 14px"
                    />
                  </div>
                  <div
                    v-if="data.level == 1 || (data.level != 1 && !data.edit)"
                    @click="handleNodeClick(node.data, 'highlightRightMap')"
                  >
                    {{ data.label }}
                  </div>
                  <el-input
                    v-if="isEdit && data.level != 1 && data.edit"
                    v-model="data.label"
                    style="width: 40%"
                    maxlength="10"
                  />
                  <img
                    v-if="isEdit && data.level != 1"
                    class="tree-item_edit"
                    src="../../assets/folder_edit.png"
                    @click="editRow(data)"
                  />
                  <img
                    v-if="isEdit && data.level != 1"
                    class="tree-item_delete"
                    src="../../assets/folder_delete.png"
                    @click="deleteNode(node, data)"
                  />
                  <div
                    v-if="data.groupType == 'folder'"
                    class="tree-item_levelName"
                  >
                    {{ wordNumberArray[data.level - 1] + "级菜单" }}
                  </div>
                  <div
                    v-if="data.level == 1 && isEdit"
                    class="tree-item_add"
                    @click="addFolder"
                  >
                    <el-icon><Plus /></el-icon>
                  </div>
                </div>
              </template>
            </el-tree>
          </div>
        </div>
      </el-card>
    </div>
  </div>
</template>

<script>
export default {
  name: "menuSetting",
  components: {},
  data() {
    return {
      allSearchValue: "",
      treeProps: {
        label: "label",
        children: "children"
      },
      isEdit: false,
      hasSearchValue: "",
      treeRef: null,
      treeData: [],
      highlightMap: {},
      highlightRightMap: {},
      singleSelectNode: {},
      singleSelectRightNode: {},
      treeDataRight: [],
      wordNumberArray: [
        "一",
        "二",
        "三",
        "四",
        "五",
        "六",
        "七",
        "八",
        "九",
        "十"
      ],
      addCount: 0,
      tabsList: [
        {
          label: "表单管理",
          name: "1"
        },
        {
          label: "表单统计",
          name: "2"
        }
      ],
      activeTabName: "1"
    };
  },

  methods: {
    filterNode(value, data) {
      if (!value) return true;
      return data.label.includes(value);
    },
    handleTabClick() {},
    init() {
      this.treeData = [
        {
          label: "人资中心",
          id: "1-2",
          groupType: "folder",
          children: [
            {
              label: "人事激励与发展",
              id: "1-2-1",
              groupType: "folder",
              children: [
                {
                  label: "请假申请表单",
                  id: "1-2-1-1",
                  groupType: "1"
                },
                {
                  label: "离职申请表单",
                  id: "1-2-1-2",
                  groupType: "1"
                },
                {
                  label: "加班申请表单",
                  id: "1-2-1-3",
                  groupType: "1"
                },
                {
                  label: "测试表单",
                  id: "1-2-1-4",
                  groupType: "2"
                }
              ]
            }
          ]
        }
      ];
      this.treeDataRight = [
        {
          label: "人资中心",
          id: "1-2",
          groupType: "folder",
          children: []
        }
      ];
      const level = 0;
      this.forData(this.treeDataRight, level);
    },

    forData(arr, level) {
      if (level || level == 0) {
        level += 1;
      }
      for (let i = 0; i < arr.length; i++) {
        const obj = arr[i];
        obj.level = level ? level : obj.level ? obj.level : "";
        obj.edit = false;
        if (obj.children) {
          this.forData(obj.children, level);
        }
      }
    },

    searchUser(type) {},
    handleLeftArrow() {},
    handleRightArrow() {
      if (
        this.singleSelectNode &&
        this.singleSelectNode.gruopType !== "folder"
      ) {
        if (
          this.singleSelectRightNode &&
          this.singleSelectRightNode.id &&
          this.singleSelectRightNode.groupType === "folder"
        ) {
          this.singleSelectRightNode.children.push({
            ...this.singleSelectNode,
            level: this.singleSelectRightNode.level + 1
          });
        } else {
          this.treeDataRight[0].children.push({
            ...this.singleSelectNode,
            level: 2
          });
        }
      }
    },

    handleNodeClick(node, nodeMap) {
      const nodeId = node.$treeNodeId;
      this[nodeMap][nodeId] = this[nodeMap][nodeId]?.highlight
        ? Object.assign({ id: nodeId }, this[nodeMap][nodeId], {
            highlight: false
          })
        : Object.assign({ id: nodeId }, this[nodeMap][nodeId], {
            highlight: true
          });
      Object.values(this[nodeMap]).forEach(v => {
        if (v.id !== nodeId) {
          v.highlight = false;
        }
      });
      if (nodeMap == "highlightMap") {
        this.singleSelectNode = node;
      } else {
        this.singleSelectRightNode = node;
      }
    },
    addFolder() {
      this.addCount++;
      if (this.singleSelectRightNode && this.singleSelectRightNode.id) {
        this.singleSelectRightNode.children.push({
          label:
            this.wordNumberArray[this.singleSelectRightNode.level] +
            "级菜单" +
            this.addCount,
          level: this.singleSelectRightNode.level + 1,
          groupType: "folder",
          id: this.singleSelectRightNode.id + "-" + this.addCount,
          edit: false,
          children: []
        });
      } else {
        this.treeDataRight[0].children.push({
          label: "二级菜单" + this.addCount,
          level: 2,
          groupType: "folder",
          id: "1-" + this.addCount,
          edit: false,
          children: []
        });
      }
    },
    editRow(data) {
      data.edit = true;
    },
    deleteNode(node, data) {
      const parent = node.parent;
      const children = parent.data.children || parent.data;
      const index = children.findIndex(e => e.id === data.id);
      children.splice(index, 1);
    },
    saveRightTree() {
      debugger;
      // 遍历数组把所有节点编辑状态重置
      this.forData(this.treeDataRight);
      this.isEdit = false;
    }
  },

  mounted() {
    this.init();
  }
};
</script>

<style lang="scss" scoped>
::v-deep .el-tree-node__content {
  height: 36px;
}
.tree-item_icon {
  margin-right: 8px;
}
.tree-item_add {
  position: absolute;
  right: 10px;
  line-height: 10px;
  color: #5086fc;
}

.tree-item_edit {
  position: absolute;
  right: 125px;
}
.tree-item_delete {
  position: absolute;
  right: 100px;
}
.tree-item_levelName {
  color: #999999;
  position: absolute;
  right: 33px;
}
.middle-btn-list {
  margin: 20px;
}
</style>
